<template>
  <div class="work-order-container">
    <div class="header">
      <el-input v-model="searchQuery" placeholder="搜索工程名称/设备名称" style="width: 300px; margin-right: 10px" clearable
        @clear="handleSearch" @keyup.enter="handleSearch"></el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%" :border="false" :header-cell-style="{ background: '#f5f7fa' }">
      <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="engineer_name" label="工程名称" align="center">
        <template #default="{ row }">
          {{ row.engineer_name || "无" }}
        </template>
      </el-table-column>
      <el-table-column prop="device_name" label="设备名称" align="center">
        <template #default="{ row }">
          {{ row.device_name || "无" }}
        </template>
      </el-table-column>
      <el-table-column prop="problemDescription" label="问题描述" align="center">
        <template #default="{ row }">{{
          row.bill_why || "无" }}</template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template #default="{ row }">
          <el-tag :type="statusTagType(row.status)" effect="plain">{{
            row.status
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="orderType" label="工单类型" align="center"> <template #default="{ row }">{{
        row.type || "无" }}</template></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template #default="{ row }">
          <el-button size="small" @click="handleDetail(row)">详情</el-button>
          <el-button size="small" type="danger" @click="handleCancel(row)"
            :disabled="row.status !== '待接单'">取消</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pagination.currentPage" :page-sizes="[5, 10, 20, 30]" :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
      style="margin-top: 20px; text-align: left"></el-pagination>
  </div>
</template>

<script>
import { getWorkOrders, cancelWorkOrder } from "@/api/workOrder";

export default {
  name: "WorkOrderList",
  data() {
    return {
      searchQuery: "",
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
    };
  },
  created() {
    this.fetchWorkOrders();
  },
  methods: {
    async fetchWorkOrders() {
      try {
        const params = {
          page: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          keyword: this.searchQuery,
        };

        const response = await getWorkOrders(params);
        this.tableData = response.data.list.map((item, index) => ({
          id:
            (this.pagination.currentPage - 1) * this.pagination.pageSize +
            index +
            1,
          ...item,
        }));

        this.pagination.total = response.data.total;

        this.tableData = this.tableData.sort((a, b) => a.id - b.id);
      } catch (error) {
        console.error("获取工单列表失败:", error);
        this.$message.error("获取工单列表失败");
      }
    },

    statusTagType(status) {
      const map = {
        待接单: "warning",
        处理中: "primary",
        已完成: "success",
        已取消: "danger",
      };
      return map[status] || "info";
    },

    handleSearch() {
      this.pagination.currentPage = 1;
      this.fetchWorkOrders();
    },

    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.fetchWorkOrders();
    },

    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.fetchWorkOrders();
    },

    handleDetail(row) {
      this.$router.push({
        path: "/work-order/detail",
        query: { id: row.id },
      });
    },

    async handleCancel(row) {
      try {
        await this.$confirm("确定要取消该工单吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });

        await cancelWorkOrder({ id: row.id });
        this.$message.success("工单取消成功");
        this.fetchWorkOrders();
      } catch (error) {
        if (error !== "cancel") {
          console.error("取消工单失败:", error);
          this.$message.error("取消工单失败");
        }
      }
    },
  },
};
</script>

<style scoped>
.work-order-container {
  padding: 0px;
  background-color: #fff;
}

.header {
  margin-bottom: 20px;
}

/* Remove table borders and add subtle row hover effect */
.el-table {
  border: none;
}

.el-table::before {
  height: 0;
}

.el-table__header {
  border-bottom: 1px solid #ebeef5;
}

.el-table__body tr:hover>td {
  background-color: #f5f7fa !important;
}

.el-table__body td {
  border-bottom: none;
}
</style>